.multi-choice {
  label {
    display: inline-block;
    position: relative;
  }

  label input[type=checkbox], label input[type=radio]{
    margin-bottom: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    cursor: pointer;
  }

  label input[type=checkbox]:checked ~ span, label input[type=radio]:checked ~ span {
    background-color: $of-dark;
    color: white;
  }

  label {
    span {
      border-radius: 0;
      border-right: 1px solid #CCC;
      pointer-events: none;
    }

    &:first-child span {
      border-bottom-left-radius: $global-radius;
      border-top-left-radius: $global-radius;
    }
  }

  button.other {
    border-radius: 0;
    border-top-right-radius: $global-radius;
    border-bottom-right-radius: $global-radius;

    &.selected {
      background-color: $of-dark;
      color: white;
    }
  }
}
